import 'package:flutter/material.dart';

class RadioGroupFixes extends StatefulWidget {
  const RadioGroupFixes({super.key});

  @override
  State<RadioGroupFixes> createState() => _RadioGroupFixesState();
}

class _RadioGroupFixesState extends State<RadioGroupFixes> {
  String? selectedValue = 'option1';

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('RadioGroup 常见问题修复')),
      body: SingleChildScrollView(
        padding: EdgeInsets.all(16),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            // 问题1: RenderFlex overflow 错误
            _buildSection(
              title: '问题1修复: RenderFlex overflow',
              child: Row(
                children: [
                  Expanded(
                    child: RadioListTile<String>(
                      dense: true,
                      title: Text('很长的选项文本1'),
                      value: 'long1',
                      groupValue: selectedValue,
                      onChanged: (value) => setState(() => selectedValue = value),
                    ),
                  ),
                  Expanded(
                    child: RadioListTile<String>(
                      dense: true,
                      title: Text('很长的选项文本2'),
                      value: 'long2',
                      groupValue: selectedValue,
                      onChanged: (value) => setState(() => selectedValue = value),
                    ),
                  ),
                ],
              ),
            ),
            
            // 问题2: 约束错误
            _buildSection(
              title: '问题2修复: 约束错误',
              child: IntrinsicHeight(
                child: Row(
                  children: [
                    Flexible(
                      child: Container(
                        constraints: BoxConstraints(maxWidth: 150),
                        child: RadioListTile<String>(
                          dense: true,
                          title: Text('选项A'),
                          value: 'optionA',
                          groupValue: selectedValue,
                          onChanged: (value) => setState(() => selectedValue = value),
                        ),
                      ),
                    ),
                    Flexible(
                      child: Container(
                        constraints: BoxConstraints(maxWidth: 150),
                        child: RadioListTile<String>(
                          dense: true,
                          title: Text('选项B'),
                          value: 'optionB',
                          groupValue: selectedValue,
                          onChanged: (value) => setState(() => selectedValue = value),
                        ),
                      ),
                    ),
                  ],
                ),
              ),
            ),
            
            // 问题3: 使用 Wrap 解决溢出
            _buildSection(
              title: '问题3修复: 使用 Wrap 防止溢出',
              child: Wrap(
                children: [
                  SizedBox(
                    width: 120,
                    child: RadioListTile<String>(
                      dense: true,
                      title: Text('选项1'),
                      value: 'wrap1',
                      groupValue: selectedValue,
                      onChanged: (value) => setState(() => selectedValue = value),
                    ),
                  ),
                  SizedBox(
                    width: 120,
                    child: RadioListTile<String>(
                      dense: true,
                      title: Text('选项2'),
                      value: 'wrap2',
                      groupValue: selectedValue,
                      onChanged: (value) => setState(() => selectedValue = value),
                    ),
                  ),
                  SizedBox(
                    width: 120,
                    child: RadioListTile<String>(
                      dense: true,
                      title: Text('选项3'),
                      value: 'wrap3',
                      groupValue: selectedValue,
                      onChanged: (value) => setState(() => selectedValue = value),
                    ),
                  ),
                ],
              ),
            ),
            
            // 问题4: 自定义紧凑布局
            _buildSection(
              title: '问题4修复: 自定义紧凑布局',
              child: Row(
                mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                children: [
                  _buildCompactRadio('紧凑1', 'compact1'),
                  _buildCompactRadio('紧凑2', 'compact2'),
                  _buildCompactRadio('紧凑3', 'compact3'),
                ],
              ),
            ),
            
            // 问题5: 使用 SingleChildScrollView 处理水平溢出
            _buildSection(
              title: '问题5修复: 水平滚动',
              child: SingleChildScrollView(
                scrollDirection: Axis.horizontal,
                child: Row(
                  children: List.generate(6, (index) {
                    return Container(
                      width: 120,
                      child: RadioListTile<String>(
                        dense: true,
                        title: Text('选项${index + 1}'),
                        value: 'scroll$index',
                        groupValue: selectedValue,
                        onChanged: (value) => setState(() => selectedValue = value),
                      ),
                    );
                  }),
                ),
              ),
            ),
            
            SizedBox(height: 20),
            
            // 当前选择显示
            Container(
              width: double.infinity,
              padding: EdgeInsets.all(16),
              decoration: BoxDecoration(
                color: Colors.green.shade50,
                borderRadius: BorderRadius.circular(8),
                border: Border.all(color: Colors.green.shade200),
              ),
              child: Text(
                '当前选择: ${selectedValue ?? '无'}',
                style: TextStyle(
                  fontSize: 16,
                  fontWeight: FontWeight.bold,
                  color: Colors.green.shade700,
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }

  Widget _buildSection({required String title, required Widget child}) {
    return Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        Text(
          title,
          style: TextStyle(
            fontSize: 16,
            fontWeight: FontWeight.bold,
            color: Colors.blue.shade700,
          ),
        ),
        SizedBox(height: 8),
        Container(
          width: double.infinity,
          padding: EdgeInsets.all(12),
          decoration: BoxDecoration(
            color: Colors.grey.shade50,
            borderRadius: BorderRadius.circular(8),
            border: Border.all(color: Colors.grey.shade300),
          ),
          child: child,
        ),
        SizedBox(height: 16),
      ],
    );
  }

  Widget _buildCompactRadio(String label, String value) {
    return GestureDetector(
      onTap: () => setState(() => selectedValue = value),
      child: Container(
        padding: EdgeInsets.symmetric(horizontal: 8, vertical: 4),
        decoration: BoxDecoration(
          color: selectedValue == value ? Colors.blue.shade100 : Colors.transparent,
          borderRadius: BorderRadius.circular(4),
          border: Border.all(
            color: selectedValue == value ? Colors.blue : Colors.grey.shade300,
          ),
        ),
        child: Row(
          mainAxisSize: MainAxisSize.min,
          children: [
            Radio<String>(
              value: value,
              groupValue: selectedValue,
              onChanged: (val) => setState(() => selectedValue = val),
              materialTapTargetSize: MaterialTapTargetSize.shrinkWrap,
            ),
            Text(label),
          ],
        ),
      ),
    );
  }
}